/* eslint-disable indent */
import React, { FC } from 'react';
import { Table as AntdTable } from 'antd';
import { TableProps as AntdTableProps } from 'antd/lib/table';
import classNames from 'classnames';
import _ from 'lodash';
import { observer, useLocalStore } from 'mobx-react';

import { layoutColor } from '@/layouts/MenuLayout/config';

import styles from './index.module.less';

export type TableProps = AntdTableProps<any> & {
  /** 表格行主键 */
  rowKey?: any;

  /** 类名 */
  rowClassName?: any;
};

export type TableStore = {
  /** 点击行 */
  currentLineKey: any;

  /** 勾选行 */
  selectedRowKeys: React.Key[];
};

const Table: FC<TableProps> = ({
  rowKey,
  className,
  pagination,
  onRow,
  rowClassName,
  rowSelection,
  onChange,
  scroll,
  sticky,
  ...rest
}) => {
  const store: TableStore = useLocalStore(() => ({
    currentLineKey: '',
    selectedRowKeys: []
  }));

  let newRowSelection;
  if (rowSelection) {
    const { onChange: _onChange, ...otherProps } = rowSelection || {};
    newRowSelection = {
      onChange: (newSelectedRowKeys: React.Key[], newSelectedRows: any[]) => {
        store.selectedRowKeys = newSelectedRowKeys;
        if (_onChange && _.isFunction(_onChange)) _onChange(newSelectedRowKeys, newSelectedRows);
      },
      ...otherProps
    };
  }

  return (
    <AntdTable
      rowKey={rowKey}
      className={classNames(styles.rbWatcherThemeTable, className)}
      pagination={
        pagination
          ? {
              showTotal: (total, range) => `${range[0]} - ${range[1]} / ${total}`, // 自定义分页
              showSizeChanger: true, // 默认展示 size 切换器
              ...pagination
            }
          : false
      }
      onRow={(record, index) => {
        let _onRow: any = onRow;
        if (onRow && _.isFunction(onRow)) _onRow = onRow(record, index);
        const { onClick: _onClick, onDoubleClick: _onDoubleClick, ...otherFun } = _onRow || {};

        return {
          onClick: event => {
            // 设置点击行
            let currentKey = index;
            if (rowKey) currentKey = record[rowKey];
            store.currentLineKey = currentKey;
            // 执行原操作
            if (_.isFunction(_onClick)) _onClick(event);
          },
          onDoubleClick: event => {
            // 设置点击行
            let currentKey = index;
            if (rowKey) currentKey = record[rowKey];
            store.currentLineKey = currentKey;
            // 执行原操作
            if (_.isFunction(_onDoubleClick)) _onDoubleClick(event);
          },
          ...otherFun
        };
      }}
      rowClassName={(record, index) => {
        // 获取设置样式
        let _rowClassName = rowClassName;
        if (_.isFunction(rowClassName)) _rowClassName = rowClassName(record, index);
        // 判断是否设置操作行样式
        let currentKey = index;
        if (rowKey) currentKey = record[rowKey];
        // 不存在勾选行且当前行是操作行时
        if (currentKey === store.currentLineKey && !store.selectedRowKeys.length) {
          return classNames(styles.rbTableCurrentLine, _rowClassName);
        } else {
          return _rowClassName;
        }
      }}
      rowSelection={newRowSelection}
      onChange={(pagination, filters, sorter, extra) => {
        // 表格变化时清除记录行
        store.currentLineKey = '';
        if (onChange && _.isFunction(onChange)) onChange(pagination, filters, sorter, extra);
      }}
      scroll={{
        x: '100%',
        ...scroll
      }}
      sticky={
        _.isBoolean(sticky) && sticky
          ? {
              offsetHeader: layoutColor.header.heightLayoutHeader || 56
            }
          : sticky
      }
      {...rest}
    />
  );
};

// 设置默认属性
Table.defaultProps = {
  size: 'small', // 小
  bordered: true // 有边框
};

export default observer(Table);
